import React, {useEffect, useState} from 'react';
import {Modal, Form, Input, Button, Radio, Upload, message} from 'antd';
import ImgCrop from 'antd-img-crop';
import {changeGoodsCategory, getGoodDetails, replyGoodsComments} from "@/services/ant-design-pro/goods";

const Index = (props) => {
  const {isModalVisible, handleCancel, id,actionRef} = props;
  const [categoryData,setCategoryData] = useState(null)


  useEffect(async ()=>{
      const data = await getGoodDetails(id)
      setCategoryData(data)
    },[])
  const [form] = Form.useForm();




  const [fileList, setFileList] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);


  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  const onPreview = async file => {
    let src = file.url;
    if (!src) {
      src = await new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj);
        reader.onload = () => resolve(reader.result);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
  };

  return (
    <div>
      <Modal
        title="编辑分类"
        visible={isModalVisible}
        onCancel={() => {
          handleCancel()
        }}
        width={800}
        footer={null}
      >
        {
          categoryData?
            <Form
              name="basic"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
              autoComplete="off"
              form={form}
              initialValues={categoryData}
              onFinish={async (values) => {
                console.log(values)
                await changeGoodsCategory(categoryData.id,values).then(()=>{
                  console.log(2222)
                  handleCancel(false)
                  message.success('商品编辑成功！')
                  actionRef.current?.reload();
                })
              }}
            >
              <Form.Item
                label="父级"
                name="pid"
              >
                <Input disabled/>
              </Form.Item>

              <Form.Item
                label="分类名称"
                name="nickname"
                rules={[{ required: true, message: '分类名称不能为空!!!' }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="分类图标"
                name="username"
                rules={[{ message: '请输入商品简介' }]}
              >
                <ImgCrop rotate>
                  <Upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture-card"
                    fileList={fileList}
                    onChange={onChange}
                    onPreview={onPreview}
                  >
                    {fileList.length < 2 && '+ Upload'}
                  </Upload>
                </ImgCrop>
              </Form.Item>

              <Form.Item
                label="分类大图"
                name="username"
                rules={[{  message: '请输入商品简介' }]}
              >
                <ImgCrop rotate>
                  <Upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture-card"
                    fileList={fileList}
                    onChange={onChange}
                    onPreview={onPreview}
                  >
                    {fileList.length < 2 && '+ Upload'}
                  </Upload>
                </ImgCrop>
              </Form.Item>

              <Form.Item
                label="排序"
                name="weigh"
              >
                <Input/>
              </Form.Item>

              <Form.Item
                label="状态"
                name="status"
                wrapperCol={{ span: 22 }}
              >
                <Radio.Group>
                  <Radio value={1}>显示</Radio>
                  <Radio value={0}>隐藏</Radio>
                </Radio.Group>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 24 }}>
                <Button type="primary" htmlType="submit" style={{width:'100%',borderRadius:'5px'}}>
                  提交
                </Button>
              </Form.Item>
            </Form> : null
        }

      </Modal>
    </div>
  );
};

export default Index;
